<template>
	<view>
		<!-- 顶部切换按钮 -->
		<view class="tab">
			<view :class="activeTab === 0 ? 'tab-btn active' : 'tab-btn'" @click="activeTab = 0">进行中</view>
			<view :class="activeTab === 1 ? 'tab-btn active' : 'tab-btn'" @click="activeTab = 1">已完成</view>
		</view>

		<!-- 查询条件 -->
		<view class="filter-bar">
			<view class="filter-item">
				<text style="font-size: 14px">维修方式：</text>
				<uni-data-select
					v-model="repairType"
					:localdata="repairTypeOptions"
					:clear="false"
					style="width: 100px"
					text
				/>
			</view>
			<view class="filter-item">
				<uni-icons type="calendar" size="20" />
				<uni-datetime-picker
					v-model="date"
					type="date"
					:clear-icon="false"
					style="margin-left: 5px;width: 120px;"
				/>
			</view>
		</view>

		<!-- 维修单列表 -->
		<view v-for="item in filteredList" :key="item.id" class="order-card">
			<view>维修单号：<span style="margin-left:50px ;">{{ item.repairId }}</span></view>
			<view>维修方式：<span style="margin-left:50px ;">{{ item.repairWay==0?"到店维修":"上门维修"}}</span></view>
			<view>预约日期：<span style="margin-left:50px ;">{{ item.repairTime }}</span></view>
		</view>
	</view>
</template>

<script>
import request from '@/uitls/request'
export default {
	data() {
		return {
			activeTab: 0,
			repairType: '',
			date: '',
			repairTypeOptions: [
				{ value: '', text: '全部' },
				{ value: '0', text: '到店维修' },
				{ value: '1', text: '上门取车' }
			],
			orderList: []
		}
	},
	computed: {
		// 精品
		filteredList() {
			console.log("开始搜索",this.data);
			
			// 根据tab、维修方式、日期筛选
			return this.orderList.filter(item => {
				const matchTab = item.status === this.activeTab
				const matchType = this.repairType === '' || item.repairWay=== this.repairType
				const matchDate = !this.date || item.repairTime.startsWith(this.date)
				return matchTab && matchType && matchDate
			})
		}
	},

        onLoad() {
			console.log("页面加载");
			
            this.getWeiXiuTask();
        },
	
	methods: {
		//调用我的维修单
		getWeiXiuTask() {
			console.log("获取我的维修单");

			request({
				url: '/evaluate/reservation/list',
				data: {
					pageNum: 1,
					pageSize: 10000,
					userId: uni.getStorageSync('userInfo').id
				},
				method: 'get',
				success: (res) => {
					console.log("获取我的维修单成功");					
					console.log(res.data);
					this.orderList = res.data.rows;
					this.orderList=this.orderList.reverse()
				},
			
			})
		}
	}
	
}	
</script>

<style>
.tab {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 10px;
	margin-top:10px ;
	justify-content: center;
}
.tab-btn {
	width: 90px;
	height: 32px;
	text-align: center;
	line-height: 32px;
	border: 1px solid #0084FF;
	color: #0084FF;
	background: #fff;
	border-radius: 4px 4px 0 0;
	/* margin-right: 10px; */
}
.tab-btn.active {
	background: #0084FF;
	color: #fff;
}
.filter-bar {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.filter-item {
	display: flex;
	align-items: center;
	margin-right: 20px;
	margin-left:10px ;
}
.order-card {
	border-bottom: 1px solid #eee;
	/* padding: 10px 0; */
	font-size: 14px;
	margin:12px auto ;
	background:white;
	width: 90%;
	height: 100px;
	padding-top: 5px;
}
.order-card view {
	display: block;
	width: 100%;
	/* background: #0084FF; */
	margin-left:20px ;
	margin-top: 10px;
}

</style>
